<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue-2.6.12开发.js"></script>
</head>

<body>
    <!-- 
        computed 和 watch的区别
        1.computed能完成的 watch都能完成
        2.watch能完成的 computed不一定能完成 watch内可以实现异步操作
        两个重要的原则
        1.所有被Vue所管理的函数 要使用普通函数 这样this就是vm 或 组件实例对象
        2.所有不被Vue所管理的函数(例如 定时器的回调 ajax的回调 promoise的回调) 一定要写箭头函数 这样this的指向才是vm或组件实例对象
        原因:箭头函数没有自己的this 它会指向上级作用域中this所指向的对象 所以 在Vue内使用不被Vue所管理的函数用箭头函数 恰恰让不被管理的函数中的this指回了vm或组件实例对象
     -->
    <div id="root">
        姓: <input type="text" v-model="firstName"><br><br>
        名: <input type="text" v-model="lastName"><br><br>
        全名:<span>{{fullName}}</span>
    </div>

    <script>
        //
        const vm = new Vue({
            el: '#root',
            data: {
                firstName: '颖',
                lastName: '儿',
                fullName: '颖' + '-' + '儿'
            },

            // computed: {
            //     fullName() { return this.firstName + '-' + this.lastName }
            // }

            watch: {
                firstName(val) {
            // 侦听属性watch中可以开启异步任务 计算属性computed不行
                    setTimeout(() => {
                        console.log(this);
                        this.fullName = val + '-' + this.lastName
                    }, 1000)

                },
                lastName(val) {
                    this.fullName = this.firstName + '-' + val
                }
            }
        })
 
    </script>
</body>

</html>